<template>
    <el-card>
        <div class="search-bar">
            <el-input placeholder="请输入查询订单号-不输入查询所有" class="input-with-select"
                clearable
            >
                <template #append>
                    <el-button type="success" icon="el-icon-search"></el-button>
                </template>
            </el-input>
        </div>
        <el-table border :data="orders" @expand-change="loadOrderDetail">
            <el-table-column label="明细" type="expand" width="60px">
                <template #default="{ row }">
                    <el-descriptions class="order-detail" :column="3" size="mini" border>
                        <el-descriptions-item label="订单编号">{{ row.order_number }}</el-descriptions-item>
                        <el-descriptions-item label="支付方式">{{ row.order_pay }}</el-descriptions-item>
                        <el-descriptions-item label="收货地址">{{ row.consignee_addr }}</el-descriptions-item>
                        <el-descriptions-item label="发票类型">{{ row.order_fapiao_title }}</el-descriptions-item>
                        <el-descriptions-item label="公司名称">{{ row.order_fapiao_company }}</el-descriptions-item>
                        <el-descriptions-item label="发票内容">{{ row.order_fapiao_content }}</el-descriptions-item>
                        <el-descriptions-item label="商品" :span="3"
                            v-for="g in ordersGoods[row.order_id]" :key="g.goods_id"
                        >{{ g }}</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="60px"></el-table-column>
            <el-table-column label="订单编号" prop="order_number"></el-table-column>
            <el-table-column label="支付状态" prop="pay_status"></el-table-column>
            <el-table-column label="发货状态" prop="is_send"></el-table-column>
            <el-table-column label="下单时间" prop="create_time" :formatter="formatDate"></el-table-column>
            <el-table-column label="更新时间" prop="update_time" :formatter="formatDate"></el-table-column>
            <el-table-column label="操作" width="180px">
                <template #default="{row}">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="openOderAddModuel(row)"></el-button>
                    <el-button type="warning" size="mini" icon="el-icon-location"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25, 30]"
            :current-page="params.pagenum"
            :page-size="params.pagesize"
            :total="total"
        >
        </el-pagination>

         <el-dialog title="修改订单地址" :visible.sync="updateOrderAdd">
            <el-form label-width="100px">
                <el-form-item label="省市区/县">
                    <el-cascader :options="cityList" style="width:100%"
                        v-model="newOrderAdd.city"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="newOrderAdd.add"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="updateOrderAdd = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            orders:[],
            ordersGoods:{},
            query:"",
            params:{
                query:"",
                pagenum:1,
                pagesize:10
            },
            total:0,
            // ---
            cityList:[],
            // ---
            updateOrderAdd:false,
            newOrderAdd:{
                city:"",
                add:""
            }
        }
    },
    methods:{
        formatDate(row,column,value){
            let data = value * 1000;
            // let temp = 'yyyy-MM-dd HH:mm:ss';
            return this.$util.formatDate(data)
            // let d = new Date( data );
            // if(d=="Invalid Date"){
            //     console.warn(data+":不是一个可以转换为时间的有效数据");
            //     return data;
            // }
            // let opt = {
            //     "y+":String(d.getFullYear()),
            //     "M+":String(d.getMonth()+1),
            //     "d+":String(d.getDate()),
            //     "H+":String(d.getHours()),
            //     "m+":String(d.getMinutes()),
            //     "s+":String(d.getSeconds())
            // }

            // for (let k in opt) {
            //     let reg = new RegExp(k);
            //     let arr = temp.match(reg);
            //     if(arr){
            //         let leg = arr[0].length;
            //         temp = temp.replace(reg, opt[k].padStart(leg,"0") )
            //     }
            // }
            // return temp;
        },
        openOderAddModuel(row){
            // console.log(row);
            let str = row.consignee_addr.trim();
            if(str!=""){
                let arr = str.split(",");
                let are = arr.splice(0,arr.length-1);
                // console.log(are,arr);
                this.newOrderAdd.city = are;
                this.newOrderAdd.add = arr[0];
            }
            this.updateOrderAdd = true;
        },
        async findOrderList(){
            this.query = this.params.query;
            let { total,goods } = await this.$api.loadOrders(this.params);
            // console.log(total,users);
            this.total = total;
            this.orders = goods;
        },
        async loadOrderDetail(row){
            console.log(row,row.isExpand);
            if(row.isExpand){
                row.isExpand = false;
                return;
            }
            row.isExpand = true;
            
            let { goods } = await this.$api.loadOrderDetail(row.order_id);
            // console.log(goods);
            // row.goods = goods;
            this.$set(this.ordersGoods, row.order_id, goods);
        },
        loadCityList(){
            this.cityList = this.$api.loadCityList()
        }
    },
    created(){
        this.findOrderList();
        this.loadCityList();
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    margin-bottom: 20px;
    .el-input {
        width: 500px;
        margin-right: 30px;
    }
}
.el-pagination{
    margin-top: 20px;
}
.delete-btn{
    margin: 0px 6px;
}
.el-select{
    width: 100%;
}
.el-form-item::v-deep .el-form-item__label{
    text-align: justify;
    text-align-last: justify;
    position: relative;
    padding-left: 12px;
    &::before{
        position: absolute;
        left: 0px;
    }
}
.order-detail{
    margin: 12px;
}
</style>